<template>
  <div id="Classes">
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>班级管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow="hover">
      <el-form
        :inline="true"
        :model="queryMap"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item label="班级">
          <el-input
            v-model="queryMap.className"
            placeholder="请输入班级"
          ></el-input>
        </el-form-item>
        <el-form-item label="班主任">
          <el-select
            v-model="queryMap.teaId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入班主任名字"
            :remote-method="getTeaListByName"
            :loading="loading"
            clearable
          >
            <el-option
              v-for="item in teaList"
              :key="item.teaId"
              :label="item.teaName"
              :value="item.teaId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="search"
            type="primary"
            icon="el-icon-search"
            :loading="loading"
            round
            >查询</el-button
          >
          <el-button
            type="success"
            icon="el-icon-plus"
            round
            :loading="loading"
            @click="(show = true), (currentCls = {})"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <template>
        <el-table
          :data="classList"
          border
          stripe
          size="mini"
          style="width: 100%; margin-top: 5px"
        >
          <el-table-column
            prop="classId"
            label="#"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="className"
            label="班级名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="teaName"
            label="班主任"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="total"
            label="总人数"
            align="center"
          ></el-table-column>
          <el-table-column label="是否可用" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" disabled></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-edit"
                size="mini"
                :loading="loading"
                @click="getCurrentCls(scope.row.classId)"
                >编辑</el-button
              >
              <el-button
                type="text"
                icon="el-icon-present"
                size="mini"
                :loading="loading"
                @click="getCurrentClsStu(scope.row.classId)"
                >授权</el-button
              >
              <el-tooltip class="item" effect="dark" content="数据删除后不可恢复，请谨慎操作！" placement="top-start">
              <el-button
                type="text"
                icon="el-icon-delete"
                size="mini"
                :loading="loading"
                @click="removeCls(scope.row.classId)"
                >删除</el-button
              >
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 10px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryMap.page"
        :page-sizes="[10, 50, 100]"
        :page-size="this.queryMap.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog title="班级详情信息" :visible.sync="show" width="400px">
      <el-form :model="currentCls" align="center">
        <el-form-item label="班级名称" label-width="70px">
          <el-input
            v-model="currentCls.className"
            autocomplete="off"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item label="班主任" label-width="70px">
          <el-select v-model="currentCls.teaId" placeholder="请输入班级">
            <el-option
              v-for="item in allTeaList"
              :key="item.teaId"
              :label="item.teaName"
              :value="item.teaId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="总人数" label-width="70px">
          <el-input
            v-model="currentCls.total"
            autocomplete="off"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否可用" label-width="70px">
          <el-select v-model="currentCls.status" placeholder="请选择是否可用">
            <el-option :key="true" label="可用" :value="true"></el-option>
            <el-option :key="false" label="不可用" :value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="loading"
          @click="updateCurrentCls(currentCls.classId)"
          >确 定</el-button
        >
        <el-button @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="班级管理授权" :visible.sync="authShow" width="400px">
      <el-form :model="currentCls" align="center">
        <el-form-item label="学生姓名" label-width="70px">
          <el-select
            v-model="currentCls.clsStuAdminId"
            placeholder="请选择学生"
          >
            <el-option
              v-for="item in currentClsStuList"
              :key="item.stuId"
              :label="item.stuName"
              :value="item.stuId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="authStuAdmin()"
          >确 定</el-button
        >
        <el-button @click="authShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import {
  queryClassesByPage,
  queryTeaListByTeaName,
  queryCurrentClsByClassId,
  saveCurrentClass,
  editCurrentClass,
  queryCurrentClsStu,
  authCurrentClsStuAdmin,
  delClass
} from "api/api";
export default {
  data() {
    return {
      classList: [],
      queryMap: { page: 1, size: 10 },
      loading: false,
      show: false,
      total: 0,
      teaList: [],
      allTeaList: [],
      currentCls: {},
      authShow: false,
      currentClsStuList: [],
      currentClsStuAdminId: "",
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    //改变页码
    handleSizeChange(newSize) {
      this.queryMap.size = newSize;
      this.getClassByPage();
    },
    //翻页
    handleCurrentChange(current) {
      this.queryMap.page = current;
      this.getClassByPage();
    },
    //班级条件查询
    getClassByPage() {
      queryClassesByPage(this.userInfo.sessionId, this.queryMap).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.total = res.data.total;
          this.classList = res.data.rows;
        }
      });
    },
    //匹配相应的教师
    getTeaListByName(key) {
      if (key != null) {
        queryTeaListByTeaName(this.userInfo.sessionId, key).then((res) => {
          if (!res.flag) {
            this.$message.error(res.message);
          } else {
            this.teaList = res.data;
          }
        });
      }
    },
    search() {
      this.loading = true;
      queryClassesByPage(this.userInfo.sessionId, this.queryMap).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
          this.loading = false;
        } else {
          this.total = res.data.total;
          this.classList = res.data.rows;
          this.loading = false;
        }
      });
    },
    //获取当前班级详情信息
    getCurrentCls(classId) {
      this.loading = true;
      this.show = true;
      queryCurrentClsByClassId(this.userInfo.sessionId, classId).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
          this.loading = false;
        } else {
          this.loading = false;
          this.currentCls = res.data;
        }
      });
    },
    //更新当前班级详情信息
    updateCurrentCls(classId) {
      this.loading = true;
      if (classId != null) {
        //更新操作
        editCurrentClass(this.userInfo.sessionId, this.currentCls).then(
          (res) => {
            if (!res.flag) {
              this.$message.error(res.message);
              this.loading = false;
            } else {
              this.$message({
                type: "success",
                message: "更新成功！",
              });
              this.loading = false;
              this.show = false;
              this.getClassByPage();
            }
          }
        );
      } else {
        //新增操作
        saveCurrentClass(this.userInfo.sessionId, this.currentCls).then(
          (res) => {
            if (!res.flag) {
              this.$message.error(res.message);
              this.loading = false;
            } else {
              this.$message({
                type: "success",
                message: "新增成功！",
              });
              this.loading = false;
              this.show = false;
              this.getClassByPage();
            }
          }
        );
      }
    },
    //获取当前班级的学生列表
    getCurrentClsStu(classId) {
      this.authShow = true;
      this.currentCls = {};
      queryCurrentClsByClassId(this.userInfo.sessionId, classId).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
          this.loading = false;
        } else {
          this.loading = false;
          this.currentCls = res.data;
          if (this.currentCls.clsStuAdminId == null) {
            this.$message({
              type: "warning",
              message: "当前班级没有学生管理员，请及时授权，以便后续使用！",
            });
          }
        }
      });
      queryCurrentClsStu(this.userInfo.sessionId, classId, null).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.currentClsStuList = res.data;
        }
      });
    },
    //设置班级管理员
    authStuAdmin() {
      this.loading = true;
      authCurrentClsStuAdmin(
        this.userInfo.sessionId,
        this.currentCls.clsStuAdminId,
        this.currentCls.classId
      )
        .then((res) => {
          if (!res.flag) {
            this.$message.error(res.message);
            this.loading = false;
          } else {
            this.$message({
              type: "success",
              message: "授权成功！",
            });
            this.loading = false;
            this.authShow = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    async removeCls(classId){
       var res = await this.$confirm(
        "删除数据后，不可恢复，请谨慎操作！！！",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消操作！",
        });
      });
      if (res == "confirm") {
        this.loading = true;
        await delClass(classId)
          .then((res) => {
            if (!res.flag) {
              this.$message.error(res.message);
              this.loading = false;
            } else {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              this.loading = false;
              this.getClassByPage();
            }
          })
          .catch((err) => {
            this.loading = false;
          });
      }
    }
  },
  mounted() {
    this.getClassByPage();
    queryTeaListByTeaName(this.userInfo.sessionId, null).then((res) => {
      if (!res.flag) {
        this.$message.error(res.message);
      } else {
        this.allTeaList = res.data;
      }
    });
  },
};
</script>